<template>
	<view class="login">
		<u-navbar :title="title" @leftClick="leftClick" :autoBack="true">
		</u-navbar>

		<view class="" :style="{ height: navBarHeight + 'px' }"></view>
		<view v-if="identity == 1" class="loginBox">
			<view class="logo" style="margin-top: 80rpx;text-align: center;">
				<image class="" src="@/static/image/login.jpg" style="width: 220rpx;height: 220rpx;" />
			</view>
			<view class="inputBox">
				<view class="input">
					<view class="lable">
						姓名
					</view>
					<input type="text" v-model="name" class="inputitem" placeholder="请输入姓名">
				</view>
				<view class="input">
					<view class="lable">
						手机号
					</view>
					<input type="number" v-model="account" class="inputitem" placeholder="请输入手机号">
				</view>
				<view class="input" style="position:relative;">
					<view class="lable">
						负责村(居)
					</view>
					<input v-if="address == ''" type="textarea" v-model="address" class="inputitem"
						placeholder="请选择负责村(居)" :readonly="true">
					<view v-else class="inputitem" style="height: 150rpx;">
						{{address}}
					</view>
					<view class="inputitem"
						style="position:absolute;background:transparent;left: 160rpx; z-index: 99999;"
						@click="handleAddress"></view>
				</view>
				<view class="addBtn" @click="openInput">
					自然村名
				</view>
			</view>

			<view class="" style="display: flex;margin-left: 70rpx;">
				<u-checkbox-group @change="handlechecked">
					<u-checkbox v-model="checked" shape="circle" activeColor="#FE5C5C"></u-checkbox>
				</u-checkbox-group>
				<view class="">
					<text>已阅读并同意</text>
					<text style="color:#FE5C5C ;" @click="handlegoprivacy">《隐私协议》</text>
					和<text style="color:#FE5C5C ;" @click="handlegouser">《用户协议》</text>
				</view>
			</view>

			<view class="loginBtn" @click="handleregister">
				签到
			</view>

		</view>
		<view v-if="identity == 0" class="loginBox">
			<view class="logo" style="margin-top: 80rpx;text-align: center;">
				<image class="" src="@/static/image/login.jpg" style="width: 220rpx;height: 220rpx;" />
			</view>
			<view class="inputBox">
				<view class="input">
					<view class="lable" style="width: 80rpx;">
						账号
					</view>
					<input type="number" v-model="accountNumber" class="inputitem" placeholder="请输入账号"
						style="width: 580rpx;">
				</view>
				<view class="input">
					<view class="lable" style="width: 80rpx;">
						密码
					</view>
					<input type="number" v-model="password" class="inputitem" placeholder="请输入密码"
						style="width: 580rpx;">
				</view>
			</view>

			<view class="" style="display: flex;margin-left: 70rpx;">
				<u-checkbox-group @change="handlechecked">
					<u-checkbox v-model="checked" shape="circle" activeColor="#FE5C5C"></u-checkbox>
				</u-checkbox-group>
				<view class="">
					<text>已阅读并同意</text>
					<text style="color:#FE5C5C ;" @click="handlegoprivacy">《隐私协议》</text>
					和<text style="color:#FE5C5C ;" @click="handlegouser">《用户协议》</text>
				</view>
			</view>

			<view class="loginBtn" @click="handleGohome">
				登录
			</view>
		</view>
		<view v-if="identity == 2" class="loginBox">
			<view class="logo" style="margin-top: 80rpx;text-align: center;">
				<image class="" src="@/static/image/login.jpg" style="width: 220rpx;height: 220rpx;" />
			</view>
			<view class="inputBox">
				<view class="input">
					<view class="lable" style="width: 80rpx;">
						账号
					</view>
					<input type="number" v-model="driveraccountNumber" class="inputitem" placeholder="请输入账号"
						style="width: 580rpx;">
				</view>
				<view class="input">
					<view class="lable" style="width: 80rpx;">
						密码
					</view>
					<input type="number" v-model="driverpassword" class="inputitem" placeholder="请输入密码"
						style="width: 580rpx;">
				</view>
			</view>

			<view class="" style="display: flex;margin-left: 70rpx;">
				<u-checkbox-group @change="handlechecked">
					<u-checkbox v-model="checked" shape="circle" activeColor="#FE5C5C"></u-checkbox>
				</u-checkbox-group>
				<view class="">
					<text>已阅读并同意</text>
					<text style="color:#FE5C5C ;" @click="handlegoprivacy">《隐私协议》</text>
					和<text style="color:#FE5C5C ;" @click="handlegouser">《用户协议》</text>
				</view>
			</view>

			<view class="loginBtn" @click="handleGohome">
				登录
			</view>
		</view>



		<u-picker :show="show" ref="uPicker" :columns="columns" @confirm="confirm" @change="changeHandler"
			@cancel="show = false"></u-picker>


		<!-- 村下级输入框 -->
		<uni-popup ref="inputDialog" type="dialog">
			<uni-popup-dialog ref="inputClose" mode="input" title="输入内容" value="对话框预置提示内容!" placeholder="请输入内容"
				@confirm="dialogInputConfirm"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import {
		login,
		getregion,
		register,
		wxLogin,
		addMinVillage
	} from "@/api/api.js"
	export default {
		data() {
			return {
				title: "",
				identity: 0,
				navBarHeight: 0,
				address: "",
				show: false,
				columns: [
					[],
					[],
					[],
					[],
					[]
				],
				name: "", //店长名称
				account: "", //手机号
				province: [], //省
				sheng: [],
				city: [], //市
				shi: [],
				area: [], //区县
				qu: [],
				township: [], //乡镇
				xiangzhen: [],
				hamlet: [], //村庄
				cunzhuang: [],
				shengCode: null, //省id
				shiCode: null, //市id
				quCode: null, //区id
				xiangzhenCode: null, //乡镇id
				cunzhuangCode: null, //村庄code
				logincode: null, //微信code
				accountNumber: "", //店长账号
				password: "", //店长密码
				driveraccountNumber: "", //司机账号,
				driverpassword: "", //司机密码
				shengName: null, //省
				shiName: null, //市
				quName: null, //区
				xiangzhenName: null, //乡镇
				cunzhuangName: null, //村庄
				addressList: [],
				classes: '',
				checked: false,
				finally: "", //输入的最后一级
				min_village: "", //添加的最后一级的名字
			}
		},
		onLoad(option) {
			let res = wx.getSystemInfoSync(); //系统信息
			let custom = wx.getMenuButtonBoundingClientRect() //胶囊按钮位置信息
			this.navBarHeight = (custom.top - res.statusBarHeight) * 2 + custom.height + 44 //计算得出导航栏高度
			// console.log("navBarHeight", this.navBarHeight)
			// this.handleGohome()
			if (option.parentid) {
				this.title = "爱心专员"
				this.identity = 1
				uni.setStorageSync("identity", this.identity)
				uni.setStorageSync("parentid", option.parentid)
				this.parentid = option.parentid
				this.handleLogin()
			} else {
				if (uni.getStorageSync("identity") == 0) {
					this.title = "业务经理"
				} else if (uni.getStorageSync("identity") == 1) {
					this.title = "爱心专员"
					// this.handleLogin()
				} else {
					this.title = "司机"
				}
				this.identity = uni.getStorageSync("identity")
			}
			this.handleGetregion()

			// this.addressList = addressList
		},
		onShow() {

		},
		mounted() {},
		methods: {
			handlechecked() {
				this.checked = !this.checked
				this.$forceUpdate()
			},
			onnodeclick(e) {
				console.log("1111111111111", e.value);
			},
			onpopupopened(e) {
				// console.log('popupopened');
			},
			onpopupclosed(e) {
				// console.log('popupclosed');
			},
			onchange(e) {
				console.log('222222222222222:', e);
			},
			// ==================================================
			handleLogin() {
				let that = this
				uni.login({
					provider: 'weixin',
					success: async (loginRes) => {
						console.log("微信获取code码", loginRes);
						that.logincode = loginRes.code
						let res = await wxLogin({
							code: that.logincode
						})
						console.log("店长登录", res)
						if (res.code == 1000) {
							if (res.data.is_new == false) {
								uni.setStorageSync("token", res.data.token)
								uni.setStorageSync("userId", res.data.user_id)
								uni.redirectTo({
									url: "/pages/home/index"
								})
							}
						}

					}
				})
			},

			handleAddress() {
				// console.log("44444444")
				this.show = true
			},
			async handleGetregion() {
				let res = await getregion()
				console.log("省市区", res)
				if (res.code == 1000) {
					res.data.forEach((item, index) => {
						this.province.push(item.name)
						this.sheng.push(item.code)
					})
					this.columns[0] = this.province
					this.shengCode = this.sheng[0]
					this.handleGetShi()
				}

			},

			async changeHandler(e) {
				// console.log("eeee", e)
				const {
					columnIndex,
					value,
					values, // values为当前变化列的数组内容
					index,
					picker = this.$refs.uPicker
				} = e

				//获取市
				if (columnIndex === 0) {
					this.city = []
					this.shi = []

					this.shengCode = this.sheng[index]
					this.shengName = this.province[index]
					uni.showToast({
						title: this.shengName,
						icon: "none",
						duration: 1500
					});
					this.handleGetShi()
					// console.log("shengCode", shengCode)
				}

				//获取区
				if (columnIndex === 1) {
					this.area = []
					this.qu = []

					this.shiCode = this.shi[index]
					this.shiName = this.city[index]
					uni.showToast({
						title: this.shiName,
						icon: "none",
						duration: 1500
					});
					this.handleGetQu()

				}

				//乡镇
				if (columnIndex === 2) {
					this.township = []
					this.xiangzhen = []
					this.quCode = this.qu[index]
					this.quName = this.area[index]
					uni.showToast({
						title: this.quName,
						icon: "none",
						duration: 1500
					});
					this.handleGeXiangzhen()

				}

				//村庄
				if (columnIndex === 3) {
					this.hamlet = []
					this.cunzhuang = []
					this.xiangzhenCode = this.xiangzhen[index]
					this.xiangzhenName = this.township[index]
					uni.showToast({
						title: this.xiangzhenName,
						icon: "none",
						duration: 1500
					});
					this.handleGetCunzhuang()
				}


				if (columnIndex === 4) {
					this.cunzhuangCode = this.cunzhuang[index]
					this.cunzhuangName = this.hamlet[index]
					uni.showToast({
						title: this.cunzhuangName,
						icon: "none",
						duration: 1500
					});
					// console.log("55555555")
				}
			},
			//获取市
			async handleGetShi() {
				this.columns[2] = []
				this.columns[3] = []
				this.columns[4] = []
				let res = await getregion({
					parent_code: this.shengCode
				})
				if (res.code == 1000) {
					res.data.forEach((item, index) => {
						this.city.push(item.name)
						this.shi.push(item.code)
					})
					this.columns[1] = this.city

					// this.shiCode = this.shi[0]
					// this.handleGetQu()
				}
				// console.log("市", res)

			},

			//获取区县
			async handleGetQu() {
				let res = await getregion({
					parent_code: this.shiCode
				})
				if (res.code == 1000) {
					res.data.forEach((item, index) => {
						this.area.push(item.name)
						this.qu.push(item.code)
					})
					this.columns[2] = this.area
					this.columns[3] = []
					this.columns[4] = []
					// this.quCode = this.qu[0]
					// this.handleGeXiangzhen()
					console.log("index4", this.columns[4])
				}

			},

			//获取乡镇
			async handleGeXiangzhen() {
				let res = await getregion({
					parent_code: this.quCode
				})
				if (res.code == 1000) {
					res.data.forEach((item, index) => {
						this.township.push(item.name)
						this.xiangzhen.push(item.code)
					})
					this.columns[3] = this.township
					this.columns[4] = []
					// this.xiangzhenCode = this.xiangzhen[0]
					// this.handleGetCunzhuang()
				}

			},

			//获取村庄
			async handleGetCunzhuang() {
				let res = await getregion({
					parent_code: this.xiangzhenCode
				})
				if (res.code == 1000) {
					res.data.forEach((item, index) => {
						this.hamlet.push(item.name)
						this.cunzhuang.push(item.code)
					})
					this.columns[4] = this.hamlet
				}

			},

			// 回调参数为包含columnIndex、value、values
			confirm(e) {
				// console.log("eeee", e,this.cunzhuangCode)
				this.address = ""
				e.value.forEach((item, index) => {
					if (item == undefined) {
						uni.showToast({
							title: '请选择负责的具体村庄！',
							icon: "none",
							duration: 3000
						});
						return
					}
					this.address += item
				})
				this.show = false
				console.log("address", this.address)
			},

			handleregister() {
				const that = this
				if (that.checked == false) {
					uni.showToast({
						title: '请先同意《隐私协议》和《用户协议》',
						icon: "none",
						duration: 2000
					});
					return
				}
				uni.login({
					provider: 'weixin',
					success: async (loginRes) => {
						console.log("微信获取code码", loginRes);
						// return
						that.logincode = loginRes.code
						let data = {
							name: that.name,
							account: that.account,
							province: that.shengName,
							city: that.shiName,
							district: that.quName,
							town: that.xiangzhenName,
							village: that.cunzhuangName,
							min_village: that.min_village,
							code: that.logincode,
							parent_id: that.parentid
						}
						console.log("店长数据", data)
						let res = await register(data)
						console.log("注册店长", res)
						if (res.code == 1000) {
							uni.setStorageSync("token", res.data.token)
							uni.setStorageSync("userId", res.data.user_id)
							uni.showToast({
								title: '签到成功',
								icon: "none",
								duration: 2000
							});
							setTimeout(() => {
								uni.redirectTo({
									url: "/pages/home/index"
								})
							}, 2500)
						} else {
							uni.showToast({
								title: res.message,
								icon: "none",
								duration: 2000
							});
						}
					}
				})

			},

			async handleGohome() {
				console.log("3333333", this.identity, this.driveraccountNumber, this.driverpassword)
				let data = {}
				if (this.identity == 0) {
					data = {
						account: this.accountNumber,
						password: this.password,
					}
				}
				if (this.identity == 2) {
					data = {
						account: this.driveraccountNumber,
						password: this.driverpassword,
					}
				}
				console.log("checked", this.checked)
				if (this.checked == false) {
					uni.showToast({
						title: '请先同意《隐私协议》和《用户协议》',
						icon: "none",
						duration: 2000
					});
					return
				}
				let res = await login(data)

				console.log("业务经理", res)
				if (res.code == 1000) {
					uni.setStorageSync("token", res.data.token)
					uni.setStorageSync("parent_id", res.data.user_id)
					uni.showToast({
						title: '登录成功',
						icon: "none",
						duration: 2000
					});
					setTimeout(() => {
						if (this.identity == 0) {
							uni.redirectTo({
								url: "/pages/home/index"
							})
						}
						if (this.identity == 2) {
							uni.redirectTo({
								url: "/pages/home/driverList"
							})
						}
					}, 2500)
				} else {
					uni.showToast({
						title: res.message,
						icon: "none",
						duration: 2000
					});
				}


			},
			handlegoprivacy() {
				uni.navigateTo({
					url: "./privacyAgreement"
				})
			},
			handlegouser() {
				uni.navigateTo({
					url: "./userAgreement"
				})
			},

			leftClick() {},
			openInput() {
				let that = this
				uni.showModal({
					title: '如果负责是自然村请填写自然村名没有请略过',
					content: '',
					editable: true, //是否显示输入框
					placeholderText: '请输入', //输入框提示内容
					confirmText: '确认',
					cancelText: '略过',
					success: async (res) => {
						if (res.confirm) {
							that.min_village = res.content
							that.address = that.address + res.content
							console.log('输入的内容：', that.address + res.content, this.cunzhuangCode);
							let subres = await addMinVillage({
								village_id: that.cunzhuangCode,
								name: res.content
							})
							// if(subres.code ==1000){
							// 	that.min_village_code = subres.data.min_village_code
							// }
						}
					}
				});
			},
			dialogInputConfirm() {

			},

		}
	}
</script>

<style scoped lang="scss">
	.addBtn {
		width: 150rpx;
		height: 70rpx;
		background-color: #FE5C5C;
		color: #F2F2F2;
		line-height: 70rpx;
		border-radius: 15rpx;
		text-align: center;
		margin-bottom: 20rpx;
		margin-left: 530rpx;
	}

	.login {
		.loginBox {
			.inputBox {
				margin-top: 114rpx;
				width: 100%;
				padding: 0 30rpx;
				box-sizing: border-box;

				.input {
					display: flex;
					align-items: center;
					width: 100%;
					margin-bottom: 30rpx;

					.lable {
						width: 180rpx;
						font-size: 35rpx;
						font-family: PingFang SC-Semibold, PingFang SC;
						font-weight: 600;
						color: #000000;
						line-height: 50rpx;
					}

					.inputitem {
						width: 490rpx;
						height: 80rpx;
						background: #F2F2F2;
						border-radius: 16rpx 16rpx 16rpx 16rpx;
						margin-left: 30rpx;
						// text-indent: 30rpx;
						padding-left: 30rpx;
						box-sizing: border-box;
					}
				}
			}

			.loginBtn {
				width: 470rpx;
				height: 88rpx;
				background: linear-gradient(180deg, #FE5C5C 0%, rgba(255, 78, 78, 0.67) 100%);
				border-radius: 60rpx 60rpx 60rpx 60rpx;
				margin: 40rpx auto;
				font-size: 48rpx;
				font-family: PingFang SC-Semibold, PingFang SC;
				font-weight: 600;
				color: #FFFFFF;
				line-height: 88rpx;
				text-align: center;
			}
		}

	}
</style>